<template>
	<div class="mainCon">
		<div class="penalrow selectw100">
			<div class="inlineblock verticalmiddle">
				<div class="inlineblock verticalmiddle">
					应用名称
				</div>
				<div class="inlineblock verticalmiddle" style="margin-left: 15px;">
					
					<el-select v-model="appvalue" placeholder="请选择" size="mini" @change='getValue'>
						<el-option v-for="item in appData" :key="item.id" :label="item.name" :value="item.id" >
							
						</el-option>
					</el-select>
					
				</div>
				<div class="inlineblock verticalmiddle" style="margin-left: 60px;">
					接口
				</div>
				<div class="inlineblock verticalmiddle" style="margin-left: 10px;">
					<el-input size="mini" placeholder="接口" v-model="keyName" @keyup.enter.native="findInterface"></el-input>
				</div>
				<div class="inlineblock verticalmiddle">
					<div class="inlineblock searchIcon" style="margin-left:15px;">
						<el-button size="mini" @click="findInterface">搜索</el-button>
					</div>
					<div class="inlineblock verticalmiddle searchIcon">
						<el-button size="mini" @click="empty">清空</el-button>
					</div>
				</div>
			</div>
			<div class="basicRightDistanceA" style="position:absolute;">
				<el-button type="primary" size="mini" @click="addControl({isAdd: true})">新增</el-button>
			</div>
		</div>

		<div class="treeparent">
			<div class="inlineblock tree">
				<el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick" default-expand-all :expand-on-click-node="false"></el-tree>
			</div>
			<div class="inlineblock treeright" style="margin-top: 0;">
				<div class="separaterow" style="margin-top: 0;height: 100%;">
					<el-table :data="controlData" style="height: 100%;" size="mini"  border ref="standardTable">
						<el-table-column property="name" label="接口名称" fixed min-width="60px">
						</el-table-column>
						<el-table-column property="interfaceName" label="访问路径" fixed min-width="60px">
						</el-table-column>
						
						<el-table-column property="intefacePath" label="包路径" min-width="60px">
						</el-table-column>
						<el-table-column property="targetType" label="类别" min-width="60px" :formatter = 'formatter'>
						</el-table-column>
						<el-table-column property="operation" label="操作" min-width="60px">
							<template slot-scope="scope">

								<el-button type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
								<el-button type="text" size="mini" @click="addControl({index:scope.$index, row:scope.row,isAdd: false})">修改</el-button>
								<el-button type="text" size="mini" @click="handleLook(scope.$index, scope.row)">查询</el-button>
							</template>
						</el-table-column>
					</el-table>

				</div>

			</div>
		</div>
		<div class="popupMask" v-if="reviserInterShow">
			<div class="popupPenal">
				<div class="popPenalTitle">
					<div class="popPenalTitleName">
						权限管理
					</div>
					<div class="popupClose ensure">

						<el-button type="primary" size="mini" @click="submitForm('controlForm')">保存</el-button>
					</div>
					<div class="popupClose">
						<el-button size="mini" @click="resetForm('controlForm')">关闭</el-button>
					</div>
				</div>
				<div class="penalContent" style="padding: 30px;">
					<el-form label-width="110px" class="demo-ruleForm" :model="controlForm" :rules="rules" ref="controlForm">
						<el-form-item label="应用名称" prop="appId">
							<el-col :span="15">
								<!--{{appName}}-->
								<!--<el-input placeholder="应用名称" v-model="controlForm.appId" disabled></el-input>-->
								<el-select v-model="controlForm.appId" placeholder="应用名称" style="width: 100%;"  class="appId"  disabled>
									<el-option :key="appName.id" :label="appName.name" :value="appName.id">
									</el-option>
								</el-select>
							</el-col>
						</el-form-item>
						<el-form-item label="接口名称" prop="name">
							<el-col :span="15">
								<el-input placeholder="如:接口功能" v-model="controlForm.name"></el-input>

							</el-col>
						</el-form-item>
						<el-form-item label="访问路径" prop="interfaceName">
							<el-col :span="15">
								<el-input placeholder="如:/systemmanage/modeltree.htm" v-model="controlForm.interfaceName"></el-input>

							</el-col>
						</el-form-item>
						<el-form-item label="包路径" prop="intefacePath">
							<el-col :span="15">
								<el-input placeholder="如:com.XXX.laboratory.web.platform.systemmanage.servlet" v-model="controlForm.intefacePath"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="类别" prop="targetType">
							<el-col :span="15">
								<el-select v-model="controlForm.targetType" class="appId" style="width: 100%;" disabled>
									<el-option 
										:key="opertype.value" 
										:label="opertype.label" 
										:value="opertype.value">
									</el-option>
								</el-select>
							</el-col>
						</el-form-item>
						<el-form-item label="备注" prop="remark">
							<el-col :span="15">
								<el-input placeholder="备注" v-model="controlForm.remark"></el-input>
							</el-col>
						</el-form-item>
						<!--<el-form-item label="接口描述" prop="intefaceDesc">
							<el-col :span="15">
								<el-input placeholder="接口描述" v-model="controlForm.intefaceDesc"></el-input>
							</el-col>
						</el-form-item>-->
					</el-form>

				</div>
				<div class="penalFooter" v-if="!isaddcontrol">
				
					<p v-if="controlForm.createBy != undefined "><span>创建人 : </span><span>{{controlForm.createBy}}</span></p>
					<p v-if="controlForm.createTime != undefined "><span>创建时间 :</span><span>{{controlForm.createTime}}</span></p>
					
					<p v-if="controlForm.updateBy != undefined "><span>修改人 : </span><span>{{controlForm.updateBy}}</span></p>
					<p v-if="controlForm.updateTime != undefined"><span>修改时间 : </span><span>{{controlForm.updateTime}}</span></p>
				</div>
			</div>
		</div>
		<div class="popupMask" v-if="chakanShow">
			<div class="popupPenal">
				<div class="popPenalTitle">
					<div class="popPenalTitleName">
						权限管理 
					</div>
					<div class="popupClose">
						<el-button size="mini" @click="close">关闭</el-button>
					</div>
				</div>
				<div class="penalContent" style="padding: 30px;">
					<el-form label-width="110px" class="demo-ruleForm" :model="controlForm" :rules="rules" ref="controlForm">
						<el-form-item label="应用名称" prop="appId">
							<el-col :span="15">
							
								<el-select v-model="controlForm.appId" placeholder="应用名称" style="width: 100%;"  class="appId" disabled>
									<el-option :key="appName.id" :label="appName.name" :value="appName.id" >
										
									</el-option>
								</el-select>
							</el-col>
						</el-form-item>
						<el-form-item label="接口名称" prop="name">
							<el-col :span="15">
								<el-input placeholder="如:接口功能" v-model="controlForm.name" disabled></el-input>

							</el-col>
						</el-form-item>
						<el-form-item label="接口" prop="interfaceName">
							<el-col :span="15">
								<el-input placeholder="接口" v-model="controlForm.interfaceName" disabled></el-input>

							</el-col>
						</el-form-item>
						
						<el-form-item label="接口路径" prop="intefacePath">
							<el-col :span="15">
								<el-input placeholder="接口路径" v-model="controlForm.intefacePath" disabled></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="类别" prop="targetType">
							<el-col :span="15">
								<el-select v-model="controlForm.targetType" style="width: 100%;" class="appId" disabled>
									<el-option 
										:key="opertype.value" 
										:label="opertype.label" 
										:value="opertype.value">
									</el-option>
								</el-select>
								
							</el-col>
						</el-form-item>
						<el-form-item label="备注" prop="remark">
							<el-col :span="15">
								<el-input placeholder="备注" v-model="controlForm.intefaceDesc" disabled></el-input>
							</el-col>
						</el-form-item>

					</el-form>

				</div>
				<div class="penalFooter">
					<p v-if="controlForm.createBy != undefined "><span>创建人 : </span><span>{{controlForm.createBy}}</span></p>
					<p v-if="controlForm.createTime != undefined "><span>创建时间 :</span><span>{{controlForm.createTime}}</span></p>
					
					<p v-if="controlForm.updateBy != undefined "><span>修改人 : </span><span>{{controlForm.updateBy}}</span></p>
					<p v-if="controlForm.updateTime != undefined"><span>修改时间 : </span><span>{{controlForm.updateTime}}</span></p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
//	import reviserInterface from './children/reviserInterface.vue';
	export default {
		data() {
			return {
				reviserInterShow: false,
				chakanShow:false,
				keyName: '',
				appData: [],
				appvalue: '',
				appName:{
					id:'',
					code:'',
					name:''
				},
				treedata: [],
				defaultProps: {
					children: 'sub',
					label: 'name'
				},
				controlData: [],
				controlForm: {
					appId:'',
					interfaceName:'',
					name:'',
//					intefaceDesc:'',
					intefacePath:'',
					target:'',
//					targetDesc:'',
					targetType:'',
					remark:'',
					
				},
				rules: {
					name: [{required: true,type: 'string',message: '请填写名称',trigger: 'blur'}],
					interfaceName:[{ required: true,validator:(rule, value, callback) => {
							var reg = /^\w+$/; 
					        if (value == '') {
					          	callback(new Error('请填写访问路径'));
					        } else if (!reg.test(value)) {
				        	 	callback(new Error('访问路径格式不正确'));
					        } else {
				         	 	callback();
					        }
					      },trigger: 'blur', },]
				},
				isaddcontrol: false,
				selectedMenu: false,
				target:'',
				opertype:{}
			};
		},
		
		mounted() {
			this.getAppData();
			this.getModelByAppid(this.appvalue);
		},
		methods: {
			formatter(row, column) {
				if(row.targetType == 'oper'){
					var newTargetType = '操作'
				}else if(row.targetType == 'menu'){
					var newTargetType = '菜单'
				}
		        return newTargetType;
		        
		    },
			empty(){
				this.keyName = '';
			},
			getValue(item){
				for(let i in this.appData){
					if(this.appData[i].id === item){
						this.appName = this.appData[i]
					}
				}
			},
			
			//获取应用数据
			getAppData() {
				this.$http({
					apiUrl: 'systemmanage/getAppList.htm',
					method: "get",
				}).then(res => {
					if(res.code === 0){
						this.appData = res.data;
						this.appvalue = res.data[0].id;
						this.appName = res.data[0];
						this.controlForm.appId = res.data[0].id;
					}
				})
			},
			//获取左边菜单树
			getModelByAppid(appid) {
				if(appid){
					var params = {
						appId: appid
					}
					this.$http({
						method: 'get',
						apiUrl: 'systemmanage/modeltree.htm',
						params: params
					}).then(res => {
						if(res.code ===0 ){
							let setting = {
								id: "id",
								pid: "parent",
								root: "",
								data: res.data
							};
							this.treedata = this.$listtotree(setting);
						}
						
					})
				}
				
			},
			handleNodeClick(data) {
				this.controlForm.targetType = data.type;
				if(this.controlForm.targetType == 'oper'){
					this.opertype.label = '操作'
					this.opertype.value = 'oper'
				}else{
					this.opertype.label = '菜单'
					this.opertype.value = 'menu'
				};
				this.selectedMenu = true;
				this.target = data.id;
				this.findInterface(this.target);
				
			},
			findInterface(parp){
				var sendData={
					interfaceName:this.keyName,
					target:this.target,
				};
				this.$http({
					method: 'post', 
					apiUrl: 'systemmanage/showModelInterfaceList.htm',
					params: sendData,
      				isJson:false,
				}).then(res=>{
					if(res.code == 0 ){
						this.controlData = res.data;
					}
					
				})
				
			},
			//关闭并重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields(); //重置表单
				if(!this.isaddcontrol){
					this.controlForm = {
						interfaceName:'',
						intefacePath:'',
						target:'',
						targetType:this.controlForm.targetType,
						remark:'',
					}
				}
				this.reviserInterShow = false;
			},
			//添加和编辑表单
			addControl(obj) {
				if(this.controlForm.targetType == 'oper'){
					this.opertype.label = '操作'
					this.opertype.value = 'oper'
				}else{
					this.opertype.label = '菜单'
					this.opertype.value = 'menu'
				};
				this.isaddcontrol = obj.isAdd;
				if(obj.isAdd) {
					if(this.selectedMenu) {
						this.reviserInterShow = true;
						this.controlForm.appId = this.appvalue;
					}
				} else {
					this.reviserInterShow = true;
					for(var i in obj.row) {
						this.controlForm[i] = obj.row[i]
					}
				}
			},
			submitForm(ruleForm) {
				this.$refs[ruleForm].validate((valid) => { //表单验证
					if(valid) {
						if(this.isaddcontrol) {
							var url = 'systemmanage/addModelInterface.htm';
							var data = {
								appId:this.controlForm.appId,
								interfaceName:this.controlForm.interfaceName,
//								intefaceDesc:this.controlForm.intefaceDesc,
								intefacePath:this.controlForm.intefacePath,
								name:this.controlForm.name,
								target:this.target,
//								targetDesc:this.controlForm.targetDesc,
								targetType:this.controlForm.targetType,
								remark:this.controlForm.remark,
							};
						} else {
							var url = 'systemmanage/updateModelInterface.htm';
							var data = {
								id: this.controlForm.id,
								appId:this.controlForm.appId,
								interfaceName:this.controlForm.interfaceName,
								name:this.controlForm.name,
//								intefaceDesc:this.controlForm.intefaceDesc,
								intefacePath:this.controlForm.intefacePath,
								target:this.target,
//								targetDesc:this.controlForm.targetDesc,
								targetType:this.controlForm.targetType,
								remark:this.controlForm.remark,
							};
						}
						this.$http({
							method: 'post',
							apiUrl: url,
							params: data,
							isJson: false,
						}).then(res => {
							if(res.code == 0) {
								this.$message({
									type: 'success',
									message: '提交成功!'
								});
								this.resetForm('controlForm');
								this.findInterface(this.target);
							} 

						}).catch(() => {

						});
					} else {
						return false;
					}
				});

			},
			handleLook(key,row){
				this.chakanShow = true;
				for(var i in row) {
					this.controlForm[i] = row[i]
				}
			},
			close(){
				this.chakanShow = false;
				this.controlForm = {
						interfaceName:'',
						intefacePath:'',
						target:'',
						targetType:this.controlForm.targetType,
						remark:'',
				}
			},
			handleDelete(key,row){
		    	this.$confirm('是否删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var that = this;
				var param = {
					id: row.id,
				}
				this.$http({
					apiUrl:'systemmanage/delModelInterface.htm',
					type: 'post',
					params: param,
				}).then(res =>{
					if(res.code === 0){
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.findInterface(this.target);
						
					}
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
			
		    },
			

		},
		watch: {
			appvalue: {
				handler(val, oldVal) {
					this.getModelByAppid(this.appvalue);
					this.controlData = [];
				},
				deep: true
			},
		},

	}
</script>

<style scoped>
	.appId  .el-input.el-input--suffix .el-input__suffix{
		display: none !important;
	}
	.treeparent {
		height: calc(100% - 50px);
		overflow: auto;
	}
	.tree {
		width: 23%;
		height: calc(100% - 10px);
		overflow: auto;
		background: #fff;
	}
	.treeright {
		margin-left: 10px;
		width: calc(76% - 10px);
		height: 100%;
		vertical-align: top;
	}
	.infoitem {
	width: calc(100%/2);
	padding-right: 20px;
	}
</style>